<template>
    <view class="aShop">
        <uv-navbar
            title="店铺主页"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="aShop-top">
            <view class="aShop-top-left">
                <image
                    :src="BaseUrl + getinfos.avatar"
                    style="width: 100rpx; height: 100rpx; border-radius: 10rpx"
                    mode="scaleToFill"
                />
                <view class="aShop-top-left-text">{{ getinfos.shopname }}</view>
            </view>
            <view class="aShop-top-right" v-if="false">
                <view class="aShop-top-right-btn" @click="video()"
                    >查看视频</view
                >
            </view>
        </view>
        <view class="cooperation-search">
            <view class="cooperation-top">
                <uv-search
                    placeholder="请输入搜索内容"
                    v-model="keyword"
                    @search="search"
                    @custom="search"
                ></uv-search>
            </view>
        </view>
        <view class="delicacies">
            <view class="tabs">
                <uv-tabs
                    :list="list"
                    @click="click"
                    :activeStyle="{ color: '#057748' }"
                    :lineColor="'#057748'"
                ></uv-tabs>
            </view>
            <view class="cart">
                <view class="cart-list">
                    <goodsList
                        style="width: 100%"
                        :goodsList="listget"
                    ></goodsList>
                </view>
                <u-loadmore v-if="cateId" :status="status" />
            </view>
        </view>
        <u-popup
            v-model="show"
            mode="center"
            :closeable="true"
            close-icon-color="#fff"
        >
            <view style="width: 100%; height: 100%">
                <video
                    style="width: 100%; height: 100%"
                    :src="videoUrl"
                    @play="onplay"
                    controls
                    @ended="show = false"
                />
            </view>
        </u-popup>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            list: [],
            Text: "初爱热情，尽享巴西美味与美酒",
            // 店铺信息
            getinfos: {},
            // 商品列表数组
            listget: [],
            text_id: 0,
            keyword: "",
            videoUrl: "",
            show: false,
            cateId: null,
            status: "nomore",
            page: 1,
        };
    },
    // 触底加载
    onReachBottom() {
        if (this.status == "nomore") return;
        this.status = "loading";
        this.page += 1;
        this.getList();
    },
    watch: {
        show: {
            handler(n, o) {
                if (!n) {
                    this.videoUrl = "";
                }
            },
        },
        cateId: {
            handler(n, o) {
                if (n) {
                    this.listget = [];
                    this.page = 1;
                }
            },
        },
        keyword: {
            handler(n, o) {
                if (n) {
                    this.listget = [];
                    this.page = 1;
                }
            },
        },
    },
    onLoad(options) {
        this.getInfo(options.id);
    },
    methods: {
        video() {
            if (this.getinfos.video != "") {
                this.show = true;
                this.videoUrl = BaseUrl + this.getinfos.video;
            } else {
                uni.showToast({
                    title: "暂无视频",
                    icon: "none",
                });
            }
        },
        onplay() {
            console.log("播放");
        },
        click(item) {
            this.listget = [];
            this.cateId = item.id;
            this.getList(item.id);
            this.text_id = item.id;
        },
        // 餐品详情
        Godetail(id, pid) {
            if (![11, 14].includes(pid)) {
                uni.navigateTo({
                    url: `/pages/product/goods?id=${id}&pid=${pid}`,
                });
            } else {
                uni.navigateTo({
                    url: `/dabai/pages/caterDetails/caterDetails?id=${id}&mobile=${this.mobile}`,
                });
            }
        },
        leftClick() {
            uni.navigateBack({
                delta: 1,
            });
        },
        // 获取店铺信息
        async getInfo(id) {
            await this.$request
                .get("api/wanlshop.shop/getShopInfo", {
                    id: id,
                })
                .then((res) => {
                    this.cateId = res.data.category[0]
                        ? res.data.category[0].id
                        : null;
                    this.getinfos = res.data;
                    this.list = res.data.category;
                    this.getList();
                    this.text_id = res.data.category[0].id;
                });
        },
        // 获取店铺分类下列表
        getList(shop_category_id) {
            if(!this.cateId) return;
            this.$request
                .get("api/wanlshop.product/lists", {
                    type: "goods",
                    keywords: this.keyword,
                    // category_id: category_id,
                    shop_category_id: this.cateId,
                    page: this.page,
                })
                .then((res) => {
                    if (res.data.data.length < 15) {
                        this.status = "nomore";
                    } else {
                        this.status = "loadmore";
                    }
                    this.listget = this.listget.concat(res.data.data);
                });
        },
        // 搜索店铺商品
        async search() {
            this.getList();
            return;
            await this.$request
                .get("api/wanlshop/product/lists", {
                    search: this.keyword,
                    pages: "goods",
                    page: 1,
                    shop_category_id: this.cateId,
                })
                .then((res) => {
                    this.listget = res.data.data;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-search__content {
    background-color: #ffffff !important;
}

/deep/.uv-search__content__input {
    background-color: #ffffff !important;
}

/deep/.uv-search__action {
    background: linear-gradient(to right, #00a579, #057849);
    padding: 14rpx 30rpx;
    border-radius: 30rpx;
    margin-right: 4rpx;
    color: #fff !important;
    width: 140rpx !important;
}

.aShop {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );

    .aShop-top {
        width: 94vw;
        margin: 190rpx 3vw 0;
        height: 140rpx;
        background-color: #fff;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .aShop-top-left {
            display: flex;
            align-items: center;
            margin-left: 20rpx;

            .aShop-top-left-text {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 28rpx;
                color: #121212;
                margin-left: 20rpx;
            }
        }

        .aShop-top-right {
            margin-right: 20rpx;

            .aShop-top-right-btn {
                width: 180rpx;
                height: 50rpx;
                background: linear-gradient(to right, #00a579, #057849);
                border: 1rpx solid #f6f6f6;
                border-radius: 30rpx;
                text-align: center;
                line-height: 50rpx;
                color: #fff;
                font-size: 28rpx;
            }
        }
    }

    .cooperation-search {
        width: 94vw;
        margin: 0rpx 3vw;
        padding-top: 20rpx;

        .cooperation-top {
            background-color: #fff;
            border-radius: 30rpx;
        }
    }

    .delicacies {
        .tabs {
            margin: 0 20rpx;
        }

        .cart {
            padding: 20rpx;
            box-sizing: border-box;
            padding-bottom: env(safe-area-inset-bottom);


            .cart-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .cart-item {
                    width: 344rpx;
                    height: 542rpx;
                    background-color: #fff;
                    border-radius: 16rpx;
                    overflow: hidden;
                    margin-bottom: 18rpx;

                    image {
                        width: 100%;
                        height: 344rpx;
                    }

                    .cart-title {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #121212;
                        line-height: 36rpx;
                        margin-top: 18rpx;
                        margin-left: 26rpx;
                    }

                    .cart-text {
                        margin-top: 22rpx;
                        margin-left: 26rpx;
                        display: flex;
                        align-items: center;
                        height: 30rpx;

                        .cart-price {
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            font-size: 30rpx;
                            color: #eb5c20;
                            padding: 0 20rpx 0 0;
                        }

                        .cart-vip {
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: 22rpx;
                            color: #eb5c20;
                            border-left: 1rpx solid #eb5c20;
                            padding: 0 10rpx;
                            height: 20rpx;
                        }
                    }

                    .cart-integration {
                        font-family: Source Han Sans CN;
                        font-weight: 300;
                        font-size: 24rpx;
                        color: #999999;
                        margin: 22rpx 0 0 26rpx;
                    }

                    .cart-shop {
                        font-family: Source Han Sans CN;
                        font-weight: 300;
                        font-size: 24rpx;
                        color: #999999;
                        line-height: 48rpx;
                        margin-left: 26rpx;
                    }
                }
            }
        }
    }
}
/deep/.u-mode-center-box {
    width: 100% !important;
    height: 100% !important;
}
/deep/.u-close {
    top: 20% !important;
}
</style>
